<template>
  <t-layout>
    <t-header>
      <t-head-menu theme="light" value="item1" height="120px">
        <template #logo>
          <img width="136" class="logo" src="https://www.tencent.com/img/index/menu_logo_hover.png" alt="logo" />
        </template>
        <t-menu-item value="item1"> 已选内容 </t-menu-item>
        <t-menu-item value="item2"> 菜单内容一 </t-menu-item>
        <t-menu-item value="item3"> 菜单内容二 </t-menu-item>
        <t-menu-item value="item4" :disabled="true"> 菜单内容三 </t-menu-item>
        <template #operations>
          <a href="javascript:;"><t-icon class="t-menu__operations-icon" name="search" /></a>
          <a href="javascript:;"><t-icon class="t-menu__operations-icon" name="notification-filled" /></a>
          <a href="javascript:;"><t-icon class="t-menu__operations-icon" name="home" /></a>
        </template>
      </t-head-menu>
    </t-header>
    <t-content>
      <video autoplay muted loop playsinline v-if="sysTheme.backVideoUrl === 'darkVideoUrl'">
        <source :src="darkVideoUrl" type="video/mp4" />
      </video>
      <video autoplay muted loop playsinline v-else>
        <source :src="lightVideoUrl" type="video/mp4" />
      </video>
      <router-view />
    </t-content>
    <t-footer> Copyright @ 2019-{{ new Date().getFullYear() }} Tencent. All Rights Reserved </t-footer>
  </t-layout>
</template>
<script setup lang="ts">
import { useThemeStore } from '@/stores';

const sysTheme = useThemeStore();
const darkVideoUrl = 'https://devpic.jcbtest.com/entrust/fea42c6c-14b5-4333-a4ec-3d515c48cbbb/ys.6717117d.mp4';
const lightVideoUrl = 'https://devpic.jcbtest.com/entrust/5d2483b1-5114-42af-8a3c-e805c0df78b8/qm1.2bff3d3f.mp4';
</script>
<style scoped>
video {
  position: fixed;
  top: 70px;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
</style>
